<template>
  <view class="transferRecord_outer">
    <view class="transferRecord_inner">
      <view class="record_header">
        <u-navbar :autoBack="true" height="152rpx" bgColor="#FFFAEF" :fixed="true" :border="true" :placeholder="true"
          @rightClick="isShowDatetimePicker = true">
          <view slot="left" class="record_header_back">
            <image src="@/static/record/goback.png"></image>
          </view>
          <view slot="center" class="record_header_title">划转记录</view>
          <view slot="right" class="record_header_date"><text>{{ $u.timeFormat(this.dateValue, "yyyy年mm月") }}</text><text
              class="iconfont">&#xe771;</text></view>
        </u-navbar>
      </view>
      <view class="capitalTransfer_content">
        <view class="capitalTransfer_content_select">
          <view v-for="(item, index) in selectList" :key="item.id" @click="changeSelectIndex(index)">
            <image src="@/static/capitalTransfer/select.png" v-if="selectIndex == index"></image>
            <image src="@/static/capitalTransfer/noselect.png" v-if="selectIndex != index"></image>
            <text :class="selectIndex == index ? 'active' : ''">{{
              item.name
            }}</text>
          </view>
        </view>
      </view>
    </view>
    <scroll-view class="reward_record_list" @scrolltolower="refreshList" :scroll-y="true"
      :style="{ height: rewardRecordListHeight + 'rpx' }">
      <view v-for="item in recordList" :key="item.id">
        <view class="reward_record_list_item">
          <view class="reward_record_list_item_top">
            <!-- <text>划转至云游ID：138 8888 8888</text> -->
            <text v-if="item.transactionType == 1 && selectIndex == 0">从云游转入</text>
            <text v-if="item.transactionType == 2 && selectIndex == 0">转出到云游</text>
            <text v-if="item.transactionType == 1 && selectIndex == 1">从云游转入</text>
            <text v-if="item.transactionType == 2 && selectIndex == 1">转出到云游</text>
            <text v-if="item.transactionType == 1 && selectIndex == 2">从闪电纪元转入</text>
            <text v-if="item.transactionType == 2 && selectIndex == 2">转出到闪电纪元</text>
          </view>
          <view class="reward_record_list_item_box">
            <view class="reward_record_list_item_center">
              <text class="reward_record_list_item_top_left">划转数量</text>
              <text class="reward_record_list_item_top_center">手续费</text>
              <text class="reward_record_list_item_top_right">日期</text>
            </view>
            <view class="reward_record_list_item_down">
              <text class="reward_record_list_item_down_left" v-if="selectIndex == 2">{{
                (Math.floor(item.number) / 1000).toFixed(3)
              }}K</text>
              <text class="reward_record_list_item_down_left" v-else>{{
                item.number
              }}</text>
              <text>{{ item.fee }}</text>
              <text class="reward_record_list_item_down_right">{{
                item.createdAt
              }}</text>
            </view>
          </view>
        </view>
      </view>
      <u-empty v-if="recordList.length == 0" mode="list" icon="https://cdn.uviewui.com/uview/empty/list.png">
      </u-empty>
    </scroll-view>
    <u-datetime-picker :show="isShowDatetimePicker" v-model="dateValue" mode="year-month"
      @cancel="isShowDatetimePicker = false" @confirm="confirmChangeDate"></u-datetime-picker>
  </view>
</template>

<script>
import { reqTransferRecordList } from "@/api/transferRecord.js";
import "./recordIconfont/iconfont.css";
import { reqBourseUserInfo } from '@/api/all.js'

export default {
  data() {
    return {
      // 选择哪种资产的下标
      selectIndex: 0,
      //  资产种类列表
      selectList: [
        {
          id: 0,
          name: "云豆",
        },
        {
          id: 1,
          name: "金豆",
        },
        {
          id: 2,
          name: "钻石",
        },
      ],
      //   列表高度
      rewardRecordListHeight: 0,
      // 是否展示日期选择框
      isShowDatetimePicker: false,
      // 默认的日期
      dateValue: Number(new Date()),
      // 选择的日期
      selectDateValue: "",
      // 记录列表
      recordList: [],
      // 交换列表总数
      recordListTotal: 0,
      // 页码
      pageNum: 1,
    };
  },
  mounted() {
    this.computedHeight();
    this.confirmChangeDate();
    this.getBourseUserInfo()

  },
  methods: {
    async getBourseUserInfo() {
      const result = await reqBourseUserInfo()
      if (result.code == 200) {
        if (result.data.position == 0) return
        this.selectList.push({
          id: 3,
          name: "代理库划转",
        },)
      } else {
        uni.showToast({
          title: result.msg,
          icon: "error",
        });
      }
    },
    // 切换资产种类
    changeSelectIndex(index) {
      this.selectIndex = index;
      this.pageNum = 1;
      this.getTransferRecordList();
    },
    // 确定修改选择时间
    confirmChangeDate(e) {
      let selectDateStr = e ? e.value : this.dateValue;
      const resultDate = uni.$u.timeFormat(selectDateStr, "yyyy-mm");
      this.pageNum = 1;
      this.selectDateValue = resultDate;
      this.isShowDatetimePicker = false;
      this.getTransferRecordList();
    },
    computedHeight() {
      uni.getSystemInfo({
        success: (res) => {
          const screenHeight = res.windowHeight; // 屏幕高度，单位为px
          this.rewardRecordListHeight = this.$pxToRpx(screenHeight) - 260;
        },
      });
    },
    // 到底后刷新列表
    refreshList() {
      if (this.recordList.length >= this.recordListTotal) {
        uni.showToast({
          title: "没有更多了",
          icon: "error",
        });
      } else {
        this.pageNum++;
        this.getTransferRecordList(1);
      }
    },
    // 划转记录
    async getTransferRecordList(val) {
      const sendData = {
        pageNum: this.pageNum,
        pageSize: 10,
        currencyId: this.selectIndex + 1,
        date: this.selectDateValue,
      };
      const result = await reqTransferRecordList(sendData);
      if (result.code == 200) {
        if (val != 1) {
          this.recordList = result.data.list;
        } else {
          this.recordList = this.recordList.concat(result.data.list);
        }
        this.recordListTotal = result.data.total;
      } else {
        uni.showToast({
          title: result.msg,
          icon: "error",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.transferRecord_outer {
  width: 100vw;
  height: 100vh;
  background: #fffaef;

  .transferRecord_inner {
    height: 260rpx;
  }

  .record_header {
    .record_header_title {
      font-size: 46rpx;
      font-family: DreamHanSansSC;
      font-weight: 600;
      color: #302b26;
    }

    .record_header_date {
      width: 199rpx;
      height: 48rpx;
      background: #f5f0e5;
      border: 1px solid #ffa814;
      border-radius: 24rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      text {
        font-size: 25rpx;
        font-family: Dream Han Sans SC;
        font-weight: normal;
        color: #ffa814;
      }
    }

    .record_header_back {
      width: 46rpx;
      height: 46rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .capitalTransfer_content {
    border-top: 2rpx solid rgba(183, 178, 169, 0.35);

    .capitalTransfer_content_select {
      display: flex;
      align-items: center;
      column-gap: 50rpx;
      margin-left: 44rpx;
      margin-top: 42rpx;

      view {
        display: flex;
        align-items: center;
        column-gap: 10rpx;
      }

      image {
        width: 34rpx;
        height: 34rpx;
      }

      text {
        font-size: 28rpx;
        font-family: DreamHanSansSC;
        font-weight: 800;
        color: rgb(90, 88, 84, 0.6);
      }

      .active {
        color: #37322c;
      }
    }
  }

  .reward_record_list {
    // overflow: auto;
    display: flex;
    flex-direction: column;
    row-gap: 70rpx;

    .reward_record_list_item {
      height: 268rpx;
      background: #fffaef;
      border-bottom: 2rpx solid rgba(183, 178, 169, 0.35);

      .reward_record_list_item_down_one {
        text {
          font-size: 25rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #6c6862;
          margin-left: 44rpx;
        }
      }

      .reward_record_list_item_down_two {
        text {
          font-size: 28rpx;
          font-family: DreamHanSansSC;
          font-weight: 600;
          color: #37322c;
          margin-left: 44rpx;
        }
      }

      .reward_record_list_item_top {
        margin-left: 44rpx;
        margin-top: 32rpx;

        text {
          font-size: 28rpx;
          font-family: DreamHanSansSC;
          font-weight: 600;
          color: #37322c;
        }
      }

      .reward_record_list_item_box {
        display: flex;
        justify-content: space-between;
      }

      .reward_record_list_item_center {
        display: flex;
        flex-direction: column;
        row-gap: 34rpx;
        margin-top: 34rpx;
        margin-left: 44rpx;

        text {
          font-size: 25rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #6c6862;
        }
      }

      .reward_record_list_item_down {
        display: flex;
        flex-direction: column;
        row-gap: 34rpx;

        align-items: flex-end;
        margin-top: 16rpx;
        margin-right: 50rpx;

        text {
          font-size: 28rpx;
          font-family: DreamHanSansSC;
          font-weight: 600;
          color: #37322c;
        }

      }
    }
  }
}
</style>
